<template>
	<div style="width: 100%;height: 100%;">
		
		<img style="width: 100%;height: 100%;"  src="../../static/image/bg.jpg"/>
		
		<div style="position: absolute;left: 0;top: 16rem;width: 81%;padding: 2rem;">
				<div style="background: #FFFFFF;border-radius: 0.3rem;position: relative;margin-bottom: 1rem;">
					<i style="font-size: 1.5rem;" class="iconfont icon-shoujihao"></i>
					<input v-model="phone" style="position: absolute;top: 0.6rem;font-size: 1rem;border: none;" placeholder="请输入手机号码" />
				</div>
				<div style="margin-bottom: 1rem;">
					<flexbox>
				      <flexbox-item :span="8"><div class="flex-demo" style="text-align: left;position: relative;background: #FFFFFF;border-radius: 0.3rem;padding-left: 0.1rem;">
				      	<span style="font-size: 1.5rem;" class="iconfont icon-button"></span>
				      	<input style="width: 73%;position: absolute;top: 0.6rem;font-size: 1rem;border: none;"  placeholder="请输入验证码" v-model="vcode"/>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" >
				      	<button @click="obtain" style="height: 2.25rem;border: none;border-radius: 0.3rem;width: 5rem;color: #FFFFFF;background: #E40088;">获取验证码</button>
				      </div></flexbox-item>
				    </flexbox>
				    
				</div>
				<div style="margin-bottom: 0.5rem;">
					<button @click="register"  style="width: 100%;height: 2.25rem;border: none;background: #CB0096;color: #FFFFFF;border-radius: 0.3rem;font-size: 1.1rem;">注册</button>
				</div>
				<div style="text-align: center;">
					<div style="font-size: 1.2rem;color: #FFFACF;margin-bottom: 0.5rem;">新用户注册登录后立获赠130学分</div>
					<div style="color: #FFFFFF;margin-bottom: 0.5rem;">10学分=1元人民币</div>
					<div style="color: #FFFFFF;">可抵扣线下课程和订阅线上课程</div>
				</div>
				
		</div>
		
		<toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="message" ></toast>
		
	</div>
</template>

<script>
	import { Toast} from 'vux'
	
	export default {
		
		components: {
		    
		    Toast
		  },
		
		data () {
		    return {
		
		      phone: '',
		      access_token:'',
		      showPositionValue:false,
		      message:'',
		      vcode:''
		
		    }
		},
		
		
		methods:{

            
            
            //获取验证码
            obtain(){
            	
            	console.log(this.phone);
            	
                this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'userlogin/sms',
		    	{
		    		access_token:this.access_token,
		    		mobile:this.phone,
		    	})
		    	.then((response) => {
		    		
	    		console.log(response)
	    		if(this.phone.length != 11){
					
					this.message = '请输入正确的手机号码'
					this.showPositionValue = true
					
				}else{
					
				}
				
				this.message = response.body.msg
				this.showPositionValue = true
				
				if(response.body.code == 0) {
					
					
					
				} else {
					
					
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
			    
            },
            
            
            //注册
            register(res){
            	
            	console.log(res)
            	
            	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.post(this.$store.state.api + 'userlogin/yzm',
		    	{
		    		access_token:this.access_token,
		    		mobile:this.phone,
		    		yzm:this.vcode,
		    		parent_id:0
		    	})
		    	.then((response) => {
		    		
	    		console.log(response)
	    		if(this.phone.length != 11){
					
					this.message = '请输入正确的手机号码'
					this.showPositionValue = true
					
				}else{
					
				}
				
				if(response.body.code == 0) {
					
					this.$router.push({ path: '/',name:'home'});
					
					
				} else {
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
					
				
				}, (response) => {
	                 
	                 
				});
            	
            }
		},
	
	
	
	
	
		mounted(){
			
			this.access_token = localStorage.getItem('access_token');
		   
//			this.register();
//          this.a();
		}
	}
	
	
	
	
</script>

<style>
	html,body{
		width: 100%;
		height: 100%;
	}
	#app{
		width: 100%;
		height: 99%;
	}
</style>